<template>
  <div class="borrow-calendar grid grid-cols-3 gap-5">
    <div class="month py-15px" v-for="item in monthsList" :key="item.id">
      <div class="text-center font-bold">{{ item.year }}年 {{ item.month }}月</div>
      <div>
        <div class="grid grid-cols-7 gap-1 py-5px px-15px mb-5px border-b-1px text-center">
          <div>一</div>
          <div>二</div>
          <div>三</div>
          <div>四</div>
          <div>五</div>
          <div>六</div>
          <div>日</div>
        </div>
        <div class="grid grid-cols-7 gap-1 px-15px text-center">
          <div
            v-for="day in item.monthlyDateList"
            :key="day"
            class="h-40px line-height-40px border-color-#eee"
            :class="[{ 'border-t-4px': day, 'day-active': getDayActive(day) }]"
            :title="getDayActive(day) ? getDayActive(day).title : ''"
          >
            {{ day.substring(8) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, inject } from 'vue';
  import { buildUUID } from '/@/utils/uuid';
  const dayjs: any = inject('$dayjs');
  interface MonthsList {
    sixMonths: object[];
  }
  interface SixMonths {
    year: string;
    month: string;
    id: string;
    monthlyDateList: string[];
  }

  const dateList = [
  {
      startDate: '2023-09-01',
      endDate: '2023-09-10',
      title: '123123123',
    },
    {
      startDate: '2023-12-01',
      endDate: '2023-12-10',
      title: '123123123',
    },
    {
      startDate: '2023-12-22',
      endDate: '2023-12-25',
      title: '123123123',
    },
    {
      startDate: '2024-01-01',
      endDate: '2024-01-10',
      title: '123123123',
    },
    {
      startDate: '2024-04-01',
      endDate: '2024-04-10',
      title: '111111111',
    },
    {
      startDate: '2024-04-18',
      endDate: '2024-04-22',
      title: '2222222222222222',
    },
    {
      startDate: '2024-04-29',
      endDate: '2024-05-15',
      title: '3333333333333',
    },
    {
      startDate: '2024-05-20',
      endDate: '2024-06-03',
      title: '44444444444444',
    },
    {
      startDate: '2024-09-20',
      endDate: '2024-09-26',
      title: 'weqweq',
    },
  ];
  // 获取借用日期
  const dateRange = [];
  const getBorrowDate = () => {
    if (dateList.length <= 0) return;
    for (let i = 0; i < dateList.length; i++) {
      const item = dateList[i];
      // 获取两个日期之间的所有日期，包括起始和结束日期
      let currentDate = dayjs(item.startDate);
      const endDate = dayjs(item.endDate);
      while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
        dateRange.push(Object.assign({}, item, { date: currentDate.format('YYYY-MM-DD') })); // 输出日期格式为YYYY-MM-DD
        currentDate = currentDate.add(1, 'day'); // 增加一天
      }
    }
  };
  // 最开始的借用日期和最后的借用日期之间的所有日期
  // 创建一个数组来存放六个月内的所有日期
  let monthsList: any = [];
  const monthsIndex = ref(0);
  const getSixMonths = () => {
    let sixMonths: object[] = [];
    // 获取当前日期
    const currentDate = dayjs().format('YYYY-MM-DD');
    // 计算第一次借用日期和最后一次借用日期的月份差；
    let startDate = dayjs(dateList[0].startDate);
    const endDate = dayjs(dateList[dateList.length - 1].endDate);
    const diffMonth = endDate.diff(startDate, 'month') + 1;
    // 循环获取每月所有日期，每次迭代加一个月
    for (let i = 0; i < diffMonth; i++) {
      let monthlyDateList: string[] = [];
      for (let j = 1; j <= startDate.daysInMonth(); j++) {
        let day = startDate.date(j).format('YYYY-MM-DD');
        monthlyDateList.push(day);
        if (day === currentDate) monthsIndex.value = i;
      }
      const year = startDate.format('YYYY');
      const month = startDate.format('MM');
      // 获取每月的第一天是星期几
      const dayOfWeek = dayjs(`${year}-${month}-01`).day();
      // 在日期列表的前面添加空字符串，以填充空白
      monthlyDateList.unshift(...Array(dayOfWeek != 0 ? dayOfWeek - 1 : 6).fill(''));
      sixMonths.push({
        year,
        month,
        id: buildUUID(),
        monthlyDateList,
      });
      if (sixMonths.length >= 6) {
        monthsList.push(sixMonths);
        sixMonths = [];
      };
      startDate = startDate.add(1, 'month');
    }
    if (sixMonths.length <= 6) {
      monthsList.push(sixMonths);
      sixMonths = [];
    }
    console.log(monthsList)
    console.log(monthsIndex.value);
    
    // getBorrowDate();
  };

 


  getSixMonths();
  // 高亮借车日期
  const getDayActive = (day) => {
    if (!day) return false;
    // 判断借用日期是否有传值日期
    let borrowObj: object | undefined = dateRange.find((item) => item.date === day);
    const isBorrow = borrowObj ? true : false;
    if (!isBorrow) return false;
    if (borrowObj) {
      Object.assign(borrowObj, { isBorrow });
    }
    return borrowObj;
  };
</script>
<style scoped lang="less">
  .month {
    border: 4px solid #eee;
  }
  .day-active {
    border-color: rgba(0, 255, 255, 0.6);
    background-color: rgba(0, 255, 255, 0.1);
  }
</style>
